<template>
  <div>
    <Header></Header>
    <!-- <div class="tou">这是头部</div> -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in carousel" :key="item.id">
            <img :src="item.url" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 新闻内容模板 -->
      <div class="wrapper">
        <div class="plates">
          <!-- 模块名称 -->
          <div class="plate" v-for="c in articles" :key="c.category.id">
            <div class="head">
              <div class="title">{{ c.category.name }}</div>
              <div class="more" @click="toListHander(c.category)">更多</div>
            </div>

            <ul class="list">
              <li
                v-for="a in c.aritcle"
                :key="a.id"
                @click="toArticleHander(a)"
              >
                {{ a.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
    <!-- <div class="di">这是底部</div> -->
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import { get } from './../utils/request'
export default {
  components: { Header, Footer },
  data() {
    return {
      carousel: [],
      articles: [],
    };
  },
  methods: {
    loadCarousel() {
      var url = "index/carousel/findAll";
      get(url).then((resp) => {
        this.carousel = resp.data;
      });
    },
    findCategoryArticles() {
      var url = "index/article/findCategoryArticles";
      get(url).then((resp) => {
        this.articles = resp.data;
        console.log(resp.data);
      });
    },
    toArticleHander(article) {
      this.$router.push({
        path: "/articles",
        query: {
          id: article.id,
          name: article.category ? a.category.name : "",
        },
      });
    },
    toListHander(category) {
      this.$router.push({
        path: "/list",
        query: category,
      });
    },
  },
  created() {
    this.loadCarousel(); //加载loadcarousel
    this.findCategoryArticles();
  },
};
</script>
<style lang="scss">
$color_primary: #3d9bf0;
.content {
  background-color: #ecf6f2;
  .carousel {
    //表示占位,
    content: "";
    display: block;
    clear: both; //清楚浮动-清除左右两侧浮动‘
  }
  .plates::after {
    //表示占位,
    content: "";
    display: block;
    clear: both; //清楚浮动-清除左右两侧浮动‘
  }
  .plates {
    .plate {
      width: 31%;
      height: 300px;
      background-color: #fff;
      padding: 0.5em;
      float: left;
      margin-right: 1%;
      margin-bottom: 0.5em;
      .head {
        display: flex;
        justify-content: space-between;
        .title {
          color: $color_primary;
          font-size: 20px;
          font-weight: bold;
        }
        .more {
          color: #999;
          font-size: 12px;
          cursor: pointer;
        }
      }
      ul.list {
        li {
          white-space: nowrap; //表示文本放不下，不会换行，当遇到br才会换行
          overflow: hidden; //超出文本显示隐藏
          //超出文字处理/超出显示为省略号
          text-overflow: ellipsis;
          line-height: 2em;
          cursor: pointer;
        }
        li:hover {
          color: $color_primary;
        }
      }
    }
    .plate:nth-child(3) {
      margin-right: 0;
    }
  }
}
</style>